<template>
    <fieldset>
        <legend>商品案例</legend>
        <div class="box1">
            编号：<input type="text" v-model="code">
            品牌名称：<input type="text"  v-model="productName">
            产品图片地址：<input type="text" v-model="imgSrc">
            价格<input type="text" v-model="price">
            <button @click="add">添加</button>
        </div>
        <div class="box2">
            品牌名称：<input placeholder="请输入搜索条件">
        </div>
        <table id="app">
            <tr>
                <th><input type="checkbox" v-model="allCheck" @change="allCheckChange"></th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item, index) in lists" :key="item.id">
                <td><input type="checkbox" v-model="checks" :value="item"></td>
                <td><img width="80" :src="item.imgSrc" alt=""></td>
                <td>{{ item.code }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.price}}</td>
                <td>
                    <button @click="decrease(item)" :disabled="item.count===0">-</button>
                    {{ item.count }}
                    <button @click="increase(item)">+</button>
                </td>
                <td><button @click="del(index)">删除</button></td>
        
            </tr>
        
        </table>
        <h1>总价格：{{total}}</h1>
    </fieldset>
</template>

<script>


let initialData = ([
    
                    {
                        // id:1,
                        id:Math.random().toString(32).substring(2),
                        imgSrc: 'https://img2.baidu.com/it/u=617154618,276393197&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=399',
                        code: '54',
                        productName: '54',
                        count: '54',
                        price: '548',
                    },
                    {
                        id: Math.random().toString(32).substring(2),
                        imgSrc: 'https://img2.baidu.com/it/u=2530299274,263319382&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
                        code: '3454',
                        productName: '754',
                        count: '754',
                        price: '7854',
                        
                        
                    }
                ])
let local = {
    get(key) {
        return JSON.parse(localStorage.getItem(key))
    },
    set(key, value) {
        localStorage.setItem(key, JSON.stringify(value))
    }
}
    export default{
        data(){
            return{
                allCheck:false,
                checks:[],
                imgSrc: '',
                code: '',
                productName: '',
                count: '',
                price: '',
                lists: local.get('qf-data') ?? initialData
            }
        },
        computed:{
            total(){
               let res = this.checks.reduce((total,item)=>{
                  return  total +=item.price*item.count
                },0)
                return res.toFixed(2)
            }
        },
        methods:{
            allCheckChange(){
                if(this.allCheck){
                    this.checks = this.lists
                }else{
                    this.checks = []
                }
            },
            del(){
                let target=this.lists.splice(1,1);
                local.set('qf-data', this.lists)
                this.checks=this.checks.filter(item=>item.id!==target[0].id)

            },
            add(){
                if(!this.code||!this.imgSrc||!this.price||!this.productName){
                    return
                }
                let obj = {
                    id: Math.random().toString(32).substring(2),
                    imgSrc:this.imgSrc,
                    code:this.code,
                    productName:this.productName,
                    count:1,
                    price:this.price

                }
                this.lists.push(obj)
                local.set('qf-data',this.lists)
            
            },
            increase(current){
                current.count++
            },
            decrease(current){
                current.count--
            },
        },
        watch:{
            checks(newChecks){
                if(newChecks.length===this.lists.length){
                    this.allCheck=true
                }else{
                    this.allCheck=false
                }
            }
        }
    }
</script>

<style>
table {
    background-color: aqua;
    border-collapse: collapse;
}

th,
td {
    width: 100px;
    text-align: center;
    border: 1px solid black;

}
</style>